<template>
  <!-- 头部导航栏 -->
  <div class="box">
    <div class="nav">
      <ul class="location">
        <li v-if="honmText != '/'" style="margin-left:10px;color: #000;">
          <!-- 首页 -->
          <router-link to="/">首页</router-link>
        </li>
        <li v-if="honmText == '/'" style="margin-left:10px;color: #000;">
          <!-- 首页 -->
          <router-link to="/"></router-link>
        </li>
      </ul>
      <ul class="new_header">
        <li @click="newRouterTz(0)">官网首页</li>
        <li @click="newRouterTz(1)">供应链</li>
        <li @click="newRouterTz(2)">营销体系</li>
        <li @click="newRouterTz(3)">数实一体化</li>
      </ul>
      <ul class="detail">
        <li class="first">
          <div >
            <!-- 登录 -->
            <span @click="toLogin" style="border:none;color: #fff;">{{ userName }}</span>
            <span @click="deloutfn" v-show="userName!='请登录'" style="border:none;color: #000;font-weight: normal; font-size: 12px;margin-left: 6px;">退出</span>
          </div>
        </li>
        <li class="first">
          <a :href="adminurl">
            <!-- 系统 -->
            <span style="border:none;color: #fff; ">{{ adminname }}</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="loginForm" v-show="isShowlogin">
      <loginForm @loginShowFn="loginShowFn"></loginForm>
    </div>
  </div>
</template>

<script>
import storage from '@/plugins/storage.js';
import { cartGoodsAll } from '@/api/cart.js';
// import { logout } from '@/api/account.js';
// import { longinName } from '@/api/goods.js';
import { getAdminState, getAdminLoginUrl } from "@/api/common.js";
export default {
  name: 'M-Header',
  created() {
    if (storage.getItem('userName')) {

      this.userName = storage.getItem('userName')
    }
  },

  data() {
    return {
      userInfo: {}, // 用户信息
      shoppingCart: [], // 购物车
      userName: '请登录',
      loginData: {
        username: '',
        password: '',
      },
      isShowlogin: false,
      honmText: this.$route.path,
      adminname: process.env.NODE_ENV === 'development' ? BASE.API_DEV.adminname : BASE.API_PROD.adminname,
      adminurl: process.env.NODE_ENV === 'development' ? BASE.API_DEV.adminurl : BASE.API_PROD.adminurl,
    };
  },
  computed: {
    // 购物车商品数量
    cartNum() {
      return this.$store.state.cartNum;
    }
  },
  methods: {
    newRouterTz(type) {
      if (type == 0) {
        window.open('http://www.wanwutong.com/#/')
      } else if (type == 1) {
        window.open('https://www.wwtscm.com/#/')
      } else if (type == 2) {
        window.open('http://www.wanwutong.com/#/marketing')
      } else if (type == 3) {
        window.open('http://www.wanwutong.com/#/numReal')
      }
    },
    loginShowFn(val) {
      console.log(val);
      this.isShowlogin = val.isShowlogin
      this.userName = val.userinfo.username
      
      console.log(storage.getItem('userName'));
    },
    goToPay() { // 跳转购物车
      let url = this.$router.resolve({
        path: '/cart'
      });
      window.open(url.href, '_blank');
    },
    goUserCenter(path) {
      // 跳转我的订单，我的足迹、收藏等
      if (this.userInfo.username) {
        this.$router.push({ path: path });
      } else {
        this.$Modal.confirm({
          title: '请登录',
          content: '<p>请登录后执行此操作</p>',
          okText: '立即登录',
          cancelText: '继续浏览',
          onOk: () => {
            this.$router.push({
              path: '/login',
              query: {
                rePath: this.$router.history.current.path,
                query: JSON.stringify(this.$router.history.current.query)
              }
            });
          }
        });
      }
    },

    // 获取购物车列表
    getCartList() {
      if (this.userInfo.username) {
        cartGoodsAll().then((res) => {
          this.shoppingCart = res.result.skuList;
          this.$store.commit('SET_CARTNUM', this.shoppingCart.length);
          this.Cookies.setItem('cartNum', this.shoppingCart.length);
        });
      }
    },
    //退出登录
    deloutfn(){
      storage.removeItem("newToken");
      storage.removeItem("userName");
      this.userName="请登录"
    },
    toLogin() {
      if (this.userName == "请登录") {
        this.isShowlogin = !this.isShowlogin
      }
    },
    toLogin2() {
      getAdminState(this.loginData).then((res) => {
        console.log(res, 'app');
        if (res.code === 0) {
          var i = getAdminLoginUrl();
        } else {
          let token = res.data.token;
          // console.log(token);
          this.userName = res.data.username
          this.isShowlogin = false
          storage.setItem("newToken", token);
        }
      });
    }

  },
};
</script>

<style scoped lang="scss">
.new_header {
  flex: 1;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: center;

  li {
    font-weight: 600;
    margin: 0 50px !important;
    cursor: pointer;
  }
}

.box {
  width: 100%;
  font-size: 16px !important;
  @include background_color($theme_color);
}

.nav {
  margin: 0 auto;
  width: 1200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.nav ul {
  list-style: none;
}

.nav li {
  float: left;
  line-height: 50px;
  margin-right: 10px;
  font-weight: bold;
}

.nav a:hover {
  color: $theme_color;
}

.first {
  color: #222;
  cursor: pointer;
}

.first a:first-child {
  color: #222;
  padding-left: 3px;
  border-left: none;
}

.location .router-link-active {
  color: #000;
}

.first span:hover,
.location .router-link-active:hover {
  color: aliceblue;
}

.loginForm {
  width: 200px;
  height: 200px;
  border-radius: 6px;
  background-color: rgba($color: #000000, $alpha: 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  z-index: 9999;
  right: 200px;
  top: 60px;
  color: #fff;
}
</style>
